<template>
    <div>
        <el-form inline>
            <el-form-item label="关键词搜索">
                <el-input v-model="queryForm.keyword" >
                    <o-select 
                        v-model='queryForm.search_type' 
                        code='orderKeywords' 
                        slot='prepend'></o-select>
                </el-input>
            </el-form-item>
            <el-form-item label='时间范围'>
                <o-date-picker v-model="queryForm.time_range"></o-date-picker>
            </el-form-item>
            <el-form-item label="支付类型">
                <o-select v-model='queryForm.payment_type' code='payTypes' ></o-select>
            </el-form-item>
            <el-form-item label='配送方式'>
                <o-select v-model='queryForm.delivery_type' code='deliveryTypes' ></o-select>
            </el-form-item>
            <el-form-item label='订单状态'>
                <o-select v-model='queryForm.delivery_type' code='orderStatus' ></o-select>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' icon='el-icon-search'>搜索</el-button>
                <el-button type='warning' icon='el-icon-refresh' @click='resetQueryForm'>重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column label='id' width="80" prop="id"></el-table-column>
            <el-table-column label='订单商品'>
                <template v-slot='scope'>
                    <div v-for="(item, index) in scope.row.product_info" :key='index' class="f-s">
                        <el-image :src='item.img_url' lazy style='width : 50px' :preview-src-list='[item.img_url]'></el-image>
                        <div>
                            <h1>{{item.product_title}}</h1>
                            <p>￥<span class="red-text">{{item.price}}</span>，数量：<span class="red-text">{{item.number}}</span></p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label='订单状态' prop='order_status_name' width="90"></el-table-column>
            <el-table-column label='订单金额'>
                <template v-slot='scope'>
                    <p>
                        总金额：<span class="rex-text">{{scope.row.total_money}}</span>
                    </p>
                    <p>
                        其中：现金支付：<span class="red-text">{{scope.row.cash_money}}</span>，小哥支付：<span class="rex-text">0</span>
                    </p>
                </template>
            </el-table-column>
            <el-table-column label="下单用户信息">
                <template v-slot='scope'>
                    <p>
                        下单用户：
                        编号<span class="red-text">{{scope.row.user_id}}</span>，
                        姓名<span class="red-text">{{scope.row.real_name}}</span>,
                        手机<span class="red-text">{{scope.row.telephone}}</span>
                    </p>
                    <p>
                        收货地址：{{scope.row.address_json.province}}{{scope.row.address_json.city}}{{scope.row.address_json.district}}{{scope.row.address_json.address}}
                    </p>
                </template>
            </el-table-column>
            <el-table-column label='操作' width="120">
                <template v-slot='scope'>
                    <el-button type='text' @click='toDetail(scope.row)'>详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <o-pagination :total='total' @current-change='currentChange'></o-pagination>
    </div>
</template>

<script>
    import {toast, alert} from '@u'
    export default {
        data () {
            return {
                tableData : [],
                queryForm : {
                    parent_id : 0,
                    page : 1,
                    limit : 10,
                    time_range : [],
                    payment_type : null,//支付类型
                    delivery_type : null,//配送方式
                    search_type : null,//搜索类型
                    keyword : null,//搜索关键词
                },
                total : 0,
                createForm : {
                    express_name : null,
                    code : null,
                }
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
            getTableData () {
                this.isLoading = true;
                this.__api.orderApi.orderList({
                    ...this.queryForm
                }).then(res => {
                    this.total = res.total;
                    this.tableData = res.data;
                })
            },
            currentChange (page) {
                this.queryForm.page = page;
                this.getTableData();
            },
            resetQueryForm () {
                this.queryForm = {
                    parent_id : 0,
                    page : 1,
                    limit : 10,
                    time_range : [],
                    payment_type : null,//支付类型
                    delivery_type : null,//配送方式
                    search_type : null,//搜索类型
                    keyword : null,//搜索关键词
                }
            },
            toDetail (row) {
                this.$router.push(`/order/detail/${row.id}`)
            }
        }
    }
</script>

<style lang='less' scoped>
    /deep/.el-tabs__header {
        margin-bottom: 0;
    }
    .el-image {
        margin-right: 10px;
    }
</style>